<template>
    <div id="content">
      <div id="map" ref="map"  style="width:800px;height:800px;"></div>
      <h1 id="msg"></h1>
    </div>
</template>

<script>
import "ol/css";
import { Map, View,Feature } from "ol";
import {Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Polygon,LineString,Point } from "ol/geom";
import { Style,Circle,Stroke,Fill } from "ol/style";

export default {
  name: "AppPointSelect2",
  data() {
      return {
      };
  },
  methods: {
     
  },
  mounted() {
        // 选中样式
        var selectedStyle = new   Style({
            image: new   Circle({
                radius: 30,
                stroke: new   Stroke({
                    width: 4,
                    color: 'red'
                }),
                fill: new   Fill({
                    color: 'green'
                })
            }),
            stroke: new   Stroke({
                width: 4,
                color: 'red'
            }),
            fill: new   Fill({
                color: 'green'
            })
        });

        // 未选中样式
        var unselectedStyle = new   Style({
            image: new   Circle({
                radius: 30,
                stroke: new   Stroke({
                    width: 4,
                    color: 'blue'
                }),
                fill: new   Fill({
                    color: 'yellow'
                })
            }),
            stroke: new   Stroke({
                width: 4,
                color: 'blue'
            }),
            fill: new   Fill({
                color: 'yellow'
            })
        });

        // 创建要素图层
        var vectorLayer = new  VectorLayer({
            source: new  VectorSource({
                features: [
                    new Feature({
                        geometry: new  Polygon([[
                            [119.0, 29.0],
                            [119.2, 29.0],
                            [119.2, 29.2],
                            [119.0, 29.2],
                            [119.0, 29.0]
                        ]]),
                        name: 'A'
                    }),
                    new Feature({
                        geometry: new  Polygon([[
                            [119.4, 29.0],
                            [119.6, 29.0],
                            [119.5, 29.2],
                            [119.4, 29.0]
                        ]]),
                        name: 'B'
                    }),
                    new Feature({
                        geometry: new  LineString([
                            [119.0, 29.4],
                            [119.2, 29.3],
                            [119.4, 29.5],
                            [119.6, 29.3],
                            [119.8, 29.6]
                        ]),
                        name: 'C'
                    }),
                    new Feature({
                        geometry: new  Point([119.4, 29.6]),
                        name: 'D'
                    }),
                ]
            }),
            style: unselectedStyle
        });

        // 创建地图
        var map = new  Map({
            target: 'map',
            layers: [
                vectorLayer,
            ],
            view: new  View({
                projection: 'EPSG:4326',
                center: [119.2, 29.2],
                zoom: 10
            })
        });

         // 注册地图事件
         map.on('singleclick', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var currentFeature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                console.log(layer);
                return feature;
            });

            var features = vectorLayer.getSource().getFeatures();
            if (currentFeature) {
                features.forEach(function (item) {
                    item.setStyle(unselectedStyle);
                });
                currentFeature.setStyle(selectedStyle);
                var name = currentFeature.get('name');
                document.getElementById('msg').innerText = '被选中的要素：' + name;
            } else {
                features.forEach(function (item) {
                    item.setStyle(unselectedStyle);
                });
            }
        });
    }
}
</script>